<template>
  <div class="menu">
      <el-card class="box-card menu-left">
        <template #header>
          <div class="card-header">
            <i
                class="el-icon-office-building title-icon"
            ></i>
            <span class="title-font">组织机构</span>
          </div>
        </template>
        <el-input
            placeholder="部门名称"
            v-model="deptName">
        </el-input>
        <div style="width: 100%" v-loading="loading">
          <el-tree
              ref="dataTree"
              :data="deptTree"
              node-key="id"
              default-expand-all
              :props="defaultProps"
              :filter-node-method="deptNode"
              :expand-on-click-node="false">
            <template #default="{ node, data }">
        <span class="custom-tree-node" >
          <span>{{ data.name }}</span>
          <span  style="position: absolute;right: 0px">
             <inline-button v-if="data.name != '根节点'"  @click="view(data,node)"   icon="el-icon-view" name="查看"></inline-button>
            <inline-button  @click="add(data,node)"   icon="el-icon-plus" name="新增"></inline-button>
            <inline-button v-if="data.name != '根节点'" @click="edit(data,node)"   icon="el-icon-edit" name="编辑"></inline-button>
            <inline-button v-if="data.name != '根节点'" is-del @click="del(data,node)"   icon="el-icon-delete" name="删除"></inline-button>
          </span>
        </span>
            </template>
          </el-tree>
        </div>
      </el-card>
      <el-card class="box-card menu-right">
        <template #header>
          <div class="card-header">
            <i
                class="el-icon-user title-icon"
            ></i>
            <span class="title-font">用户管理</span>
            <el-button class="title-button" @click="addUser" type="primary">新增用户</el-button>
          </div>

        </template>
        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="queryForm.realName" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="部门名称">
            <el-input v-model="queryForm.deptName" placeholder="部门名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
            :data="userData"
            :height="tableHeight-250"
            border
            v-loading="userLoading"
            stripe
            style="width: 100%">
          <el-table-column
              label="序号"
              header-align="center"
              align="center"
              type="index"
              width="50"
             >
          </el-table-column>
          <el-table-column
              prop="realName"
              header-align="center"
              align="center"
              label="姓名"
              width="120">
          </el-table-column>
          <el-table-column
              header-align="center"
              align="center"
              prop="sex"
              label="性别"
              width="50">
          </el-table-column>
          <el-table-column
              header-align="center"
              align="left"
              prop="companyName"
              label="公司名称">
          </el-table-column>
          <el-table-column
              header-align="center"
              align="left"
              prop="deptName"
              label="部门名称">
          </el-table-column>
          <el-table-column
              header-align="center"
              align="center"
              width="180"
              label="操作">
            <template #default="scope">
              <inline-button @click="viewUser(scope.row)"   icon="el-icon-view" name="查看"></inline-button>
              <inline-button @click="editUser(scope.row)"   icon="el-icon-edit" name="编辑"></inline-button>
              <inline-button @click="setRole(scope.row)"   icon="el-icon-set-up" name="权限管理"></inline-button>
              <inline-button @click="delUser(scope.row)" is-del  icon="el-icon-delete" name="删除"></inline-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryForm.current"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="queryForm.size"
            layout="total, sizes, prev, pager, next"
            :total="queryForm.total">
        </el-pagination>
      </el-card>
      <dept-add-update-form @reload="init" ref="deptAddUpdateForm"></dept-add-update-form>
      <user-add-update-form @reload="getUserData" ref="userAddUpdateForm"></user-add-update-form>
      <user-role-dialog ref="userRoleDialog"></user-role-dialog>
  </div>
</template>

<script>
import deptAddUpdateForm from './dept-add-update-form'
import VueUtil from "@/util/VueUtil";
import {NuoDeptController, NuoUserController, NuoUserRoleController} from "@/actions/controller";
import adapter from '@/sys/js/adapter'
import InlineButton from "@/components/button/inline-button";
import userAddUpdateForm from './user-add-update-form'
import UserRoleDialog from "@/sys/base/dept/user-role-dialog";
export default {
  name: "dept",
  components:{
    UserRoleDialog,
    InlineButton,
    deptAddUpdateForm,
    userAddUpdateForm,
  },
  mounted() {
    this.init()
    this.getUserData()
  },
  mixins: [adapter],
  data(){
    return{
      deptName: '',
      loading: false,
      userLoading: false,
      deptTree: [
        {
          name: '根节点',
          id: '0',
          children:[]
        }
      ],
      queryForm: {
        realName: '',
        deptName: '',
        current: 1,
        size: 10,
        total: 0
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      userData:[]
    }
  },
  watch:{
    deptName(val) {
      this.$refs.dataTree.filter(val);
    }
  },
  methods:{
    init(){
      this.loading = true
      VueUtil(this).ajax(NuoDeptController.queryAllDept).then(res=>{
        this.deptTree[0].children = res.data
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    query(){
      Object.assign(this.queryForm,{
        current: 1,
        size: 10
      })
       this.getUserData()
    },
    //页面条数变更时触发
    handleSizeChange(val){
      this.queryForm.size = val
      this.getUserData()

    },
    //当前页面变更时触发
    handleCurrentChange(val){
      this.queryForm.current = val
      this.getUserData()

    },
    editUser(row){
       this.userLoading = true
       VueUtil(this).ajax(NuoUserController.queryUserById,{id:row.id}).then(res=>{
         this.$refs.userAddUpdateForm.init("修改用户",res.data)
         this.userLoading = false
       }).catch(()=>{
         this.userLoading = false
       })
    },
    viewUser(row){
      this.userLoading = true
      VueUtil(this).ajax(NuoUserController.queryUserById,{id:row.id}).then(res=>{
        this.$refs.userAddUpdateForm.init("查看用户",res.data,true)
        this.userLoading = false
      }).catch(()=>{
        this.userLoading = false
      })
    },
    delUser(row){
      VueUtil(this).del("此操作将删除这个用户",NuoUserController.deleteUserById,{id:row.id},()=>{
        this.getUserData()
      })
    },
    addUser(){

       this.$refs.userAddUpdateForm.init("新增用户")
    },
    setRole(row){
      this.userLoading = true
      VueUtil(this).ajax(NuoUserRoleController.queryRoleIdsByUserId,{userId:row.id}).then(res=>{
        this.userLoading = false
        this.$refs.userRoleDialog.init("角色设置",row.id,res.data)
      }).catch(()=>{
        this.userLoading = false
      })

    },
    getUserData(){
       this.userLoading = true
        VueUtil(this).ajax(NuoUserController.queryUserPageByParam,this.queryForm).then(res=>{
           this.userData =  res.data.records
           this.queryForm.total = res.data.total
          this.userLoading = false
        }).catch(()=>{
          this.userLoading = false
        })
    },
    deptNode(value, data){
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    add(row){
      this.$refs.deptAddUpdateForm.init("新增组织机构",{pid : row.id});
    },
    view(row){
      this.loading = true
      VueUtil(this).ajax(NuoDeptController.queryDeptById,{id : row.id}).then(res=>{
        this.$refs.deptAddUpdateForm.init("查看组织机构",res.data,true);
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    edit(row){
      this.loading = true
      VueUtil(this).ajax(NuoDeptController.queryDeptById,{id : row.id}).then(res=>{
        this.$refs.deptAddUpdateForm.init("修改组织机构",res.data);
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    del(row){
      VueUtil(this).del("此操作将删除这个组织机构",NuoDeptController.deleteDeptById,{id:row.id},()=>{
        this.init()
      })
    }
  }
}
</script>

<style scoped>

</style>